<template>
  <div class="h-[65px] flex justify-center items-center header relative">


    <div class="time flex items-end">
      <div class="text-[24px] mr-[8px] font-semibold">{{ now1 }}</div>
      <div class="text-[12px] mb-[3px] mr-[8px]">{{ now }}</div>
      <div class="text-[12px] mb-[3px]">{{ now2 }}</div>
    </div>

    <div style="font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;" class="text-white text-[32px]">工程运维可视化系统</div>


    <div class="absolute top-[18px] right-[16px] flex items-center">
      <!-- <img class="w-[20px] h-[20px] mr-[8px]" src="../../assets/icon@2x.png" alt="">
      <div class="text-[14px] text-white">用户名</div> -->
    </div>

  </div>
</template>
<script setup>
import { ref, onBeforeUnmount } from "vue";
import dayjs from "dayjs";

const now = ref(null);
const now1 = ref(null);
const now2 = ref(null);
const nowTime = ref(null);
nowTime.value = setInterval(() => {
  now.value = dayjs().format("YYYY年MM月DD日");
  now1.value = dayjs().format("HH:mm:ss");
  let t = dayjs().day()
  switch (t) {
    case 0:
      now2.value = '星期日'
      break;
    case 1:
      now2.value = '星期一'
      break;
    case 2:
      now2.value = '星期二'
      break;
    case 3:
      now2.value = '星期三'
      break;
    case 4:
      now2.value = '星期四'
      break;
    case 5:
      now2.value = '星期五'
      break;
    default:
      now2.value = '星期六'
      break;
  }



}, 1000);
onBeforeUnmount(() => {
  if (nowTime.value) {
    clearInterval(nowTime.value);
    clearInterval(nowTime.value);
    nowTime.value = null;
  }
});
const list = ref([
  { name: "预案一张图" },
  { name: "预案应用", url: 'https://60.167.58.129:4420/#/plan?token=806a96020a7c42d388d3a3d1c3d1fd3e' },
  { name: "预案管理", url: 'https://60.167.58.129:4420/#/admin/statistics?token=806a96020a7c42d388d3a3d1c3d1fd3e' },
  { name: "支撑平台", url: 'https://60.167.58.129:4420/#/plan?token=806a96020a7c42d388d3a3d1c3d1fd3e' },


  // { name: "预案应用" ,url:'https://43.137.0.78:4420/#/plan?token=806a96020a7c42d388d3a3d1c3d1fd3e'},
  // { name: "预案管理" ,url:'https://43.137.0.78:4420/#/admin/statistics?token=806a96020a7c42d388d3a3d1c3d1fd3e'},
  // { name: "支撑平台" ,url:'https://43.137.0.78:4420/#/plan?token=806a96020a7c42d388d3a3d1c3d1fd3e'},
  { name: "警情信息" },
]);
const activeIndex = ref(0);
const tapItems = (i) => {

};
</script>
<style scoped>
.header {
  background-image: url(../../assets/head@2x.png);
  background-size: 100% 100%;
}

.active {
  background-image: url(../../assets/active.png);
  background-size: 100% 100%;

  font-weight: 600;
  color: #00fff3;
}

.noActive {
  background-image: url(../../assets/noactive.png);
  background-size: 100% 100%;
  font-weight: 400;
  color: #3d9acc;
}

.time {
  color: #fff;
  position: absolute;
  left: 16px;
  top: 12px;
  font-size: 25px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}


.men_ban {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999999999999999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.conternt {
  width: 1016px;
  height: 644px;
  background-image: url(../../assets/bg65.png);
  background-size: 100% 100%;
  position: relative;

}

.jQTit {
  background-image: url(../../assets/title65.png);
  background-size: 100% 100%;
  width: 178px;
  height: 38px;
  margin: 24px 0 16px 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
}

.BBox {
  display: flex;
  position: relative;
}

.TU1 {
  width: 520px;
  height: 542px;
  background-image: url(../../assets/bg1.png);
  background-size: 100% 100%;
  margin: 0 16px 0 24px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  padding: 10px 25px;

}

.TU2 {
  width: 432px;
  height: 542px;
  background-image: url(../../assets/bg2.png);
  background-size: 100% 100%;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  padding: 10px 25px;
}

.center_list {
  position: absolute;
  width: 968px;
  height: 481px;
  right: 24px;
  top: 61px;
  /* padding: 0 19px; */
}

.BlueTit {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #41BAFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.isRow {
  justify-content: space-around;
  margin-bottom: 16px;
}

.scrollowBox {
  overflow-y: auto;
  height: calc(100% - 34px);
}


.whiteTit {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(117, 146, 168, 1);
  height: 10px;
  background-color: #03a4f8;
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-track-piece {
  width: 2px;
}
</style>
